<!-- 在线资源页面 -->
<template>
	<view class="w">
		<view class="hd">
			<!-- 搜索框 -->
			<view class="search">
				<uni-search-bar placeholder="大学生生涯早规划" bgColor="#EEEEEE" cancelButton="none" readonly radius="20" />
				<!-- <u-search placeholder="大学生生涯早规划" v-model="keyword" :showAction="false" inputAlign="center"></u-search> -->
			</view>

			<!-- tab栏切换 -->
			<view class="tabs">
				<u-tabs-swiper
					ref="uTabs"
					:list="tablist"
					:current="current"
					@change="tabsChange"
					:is-scroll="false"
					:swiperWidth="750"
					font-size="30"
					active-color="#00DCB6"
				></u-tabs-swiper>
			</view>
		</view>
		<!--  内容-->
		<view class="tabContent">
			<swiper :style="{ height: swiperHeight }" class="swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<!-- 免费好课 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="onreachBottom">
						<view class="contentTop">
							<!-- 轮播图 -->
							<u-swiper :list="Imglist" @change="" @click=""></u-swiper>
						</view>
						<!-- 免费好课 -->
						<view class="freeClass">
							<view class="classTop">
								<u-cell-group :border="false">
									<u-cell title="免费好课" value="查看全部" isLink :border="false" titleStyle="color:black; font-size:35rpx"></u-cell>
								</u-cell-group>
							</view>
							<!-- 课程内容 -->
							<view @click="gocourseDetail(item)" class="classContent" v-for="item in courselist" :key="item.id">
								<!-- 左边 -->
								<view class="box-info-img">
									<image :src="item.src" mode="widthFix"></image>
								</view>
								<!-- 右边 -->
								<view class="classInfo">
									<text>{{ item.title }}</text>
									<text>{{ item.name }}</text>
									<text>{{ item.autor }}</text>
									<view class="icon">
										<uni-icons custom-prefix="iconfont" type="icon-geren" size="15" class="sex-icon"></uni-icons>
										<text>{{ item.number }}</text>
									</view>
								</view>
							</view>

							<!-- 名师专栏 -->
							<view class="classBotoom">
								<u-cell-group :border="false">
									<u-cell title="名师专栏" value="查看全部" isLink :border="false" titleStyle="color:black; font-size:35rpx;"></u-cell>
								</u-cell-group>
							</view>
							<!-- 名师专栏内容 -->
							<view class="classContent" v-for="item in teacherlist" :key="item.id">
								<!-- 左边 -->
								<view class="box-info-img">
									<image :src="item.src" mode="widthFix"></image>
								</view>
								<!-- 右边 -->
								<view class="classInfo">
									<text>{{ item.title }}</text>
									<text>{{ item.name }}</text>
									<text>{{ item.autor }}</text>
									<view class="icon">
										<uni-icons custom-prefix="iconfont" type="icon-geren" size="15" class="sex-icon"></uni-icons>
										<text>{{ item.number }}</text>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 名师专栏 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y @scrolltolower="onreachBottom">
						<!--  -->
						<view class="">暂无更多</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// info
			courselist: [
				{ title: '15节高情商提升课', name: '拥有美好人生', autor: '李丽', number: '7895', src: '/static/my/tp1.webp' , id: 1},
				{ title: '15节高情商提升课', name: '拥有美好人生', autor: '李丽', number: '7895', src: '/static/my/tp1.webp' , id: 2},
				{ title: '15节高情商提升课', name: '拥有美好人生', autor: '李丽', number: '7895', src: '/static/my/tp1.webp' , id: 3}
			],
			teacherlist: [
				{ title: '15节高情商提升课', name: '拥有美好人生', autor: '李丽', number: '7895', src: '/static/my/tp1.webp' , id: 4},
				{ title: '15节高情商提升课', name: '拥有美好人生', autor: '李丽', number: '7895', src: '/static/my/tp1.webp' , id: 5},
				{ title: '15节高情商提升课', name: '拥有美好人生', autor: '李丽', number: '7895', src: '/static/my/tp1.webp' , id: 6}
			],
			Imglist: ['https://cdn.uviewui.com/uview/swiper/swiper3.png', 'https://cdn.uviewui.com/uview/swiper/swiper2.png', 'https://cdn.uviewui.com/uview/swiper/swiper1.png'],
			tablist: [
				{
					name: '免费好课'
				},
				{
					name: '名师专栏'
				}
			],
			keyword: '',
			current: 0,
			swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			// content高度
			swiperHeight: ''
		};
	},
	onLoad() {
		// 获取设备信息
		this.sysInfo = uni.getSystemInfoSync();
		this.winWidth = this.sysInfo.screenWidth;
		this.swiperHeight = (this.sysInfo.windowHeight - 40 - 50) * 2 + 'rpx';
	},
	methods: {
		tabsChange(index) {
			// console.log(index)
			this.swiperCurrent = index;
		},
		// swiper-item左右移动，通知tabs的滑块跟随移动
		transition(e) {
			let dx = e.detail.dx;
			this.$refs.uTabs.setDx(dx);
		},
		// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish(e) {
			let current = e.detail.current;
			this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		},
		// scroll-view到底部加载更多
		onreachBottom() {},
		gocourseDetail(item){
			uni.navigateTo({
				url:'/subpkg/Course/courseContent?id='+item.id
			})
		}
	}
};
</script>
<style lang="scss" scoped>
.w {
	padding: 0 30rpx;
}
.contentTop {
	margin-top: 30rpx;
}

.classContent {
	padding: 0 30rpx;
	display: flex;
	justify-content: space-around;
	margin-top: 20rpx;
}

.classInfo {
	display: flex;
	flex-direction: column;
	font-size: 25rpx;
	color: #b3b3b3;
	margin-left: 20rpx;
}
.classInfo > text {
	margin-top: 5rpx;
}
.classInfo > text:nth-child(1) {
	font-size: 30rpx;
	font-weight: 700;
	color: #2e2e2e;
}
::v-deep .icon-geren {
	color: #b3b3b3 !important;
}
.box-info-img {
	width: 300rpx;
	height: 200rpx;

	overflow: hidden;
}
</style>
